<template>
  <div>
    <el-row :gutter="20" style="margin:30px 20px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>个人中心</span>
            </div>
            <div class="names">
              <!-- 头像 -->
              <div class="demo-basic--circle">
                <div class="block"><el-avatar :size="100" :src="avatar"></el-avatar></div>
              </div>
              <!-- 昵称 -->
              <div>
                <div class="name-role">
                  <span class="sender">{{dataForm.nickName}}</span>
                </div>
                <div class="registe-info">
                  <span class="registe-info">
                    <p v-if="dataForm.job === '1'">管理员</p>
                    <p v-if="dataForm.job === '2'">志愿者</p>
                  </span>
                </div>
              </div>
            </div>

            <el-divider></el-divider>
            <div class="personal-relation">
              <div class="relation-item">手机号:
                <div v-if="dataForm.phone == '000'" style="float: right; padding-right:20px;">未填</div>
                <div v-if="dataForm.phone != '000'" style="float: right; padding-right:20px;">{{dataForm.phone}}</div>
              </div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">性别:
                <div v-if="dataForm.gender == 0" style="float: right; padding-right:20px;">未填</div>
                <div v-if="dataForm.gender == 1" style="float: right; padding-right:20px;">男</div>
                <div v-if="dataForm.gender == 2" style="float: right; padding-right:20px;">女</div>
              </div>
            </div>
            <div class="personal-relation">
              <div class="relation-item">姓名:
                <div v-if="dataForm.name !== '000'" style="float: right; padding-right:20px;">{{dataForm.name}}</div>
                <div v-else style="float: right; padding-right:20px;">未填</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" ref="rightDataForm" :model="rightDataForm" size="small" label-position="right" :rules="rules">
                <el-form-item label="用户昵称" prop="nickName">
                  <el-input  v-model="rightDataForm.nickName"></el-input>
                </el-form-item>
                <el-form-item label="用户姓名" prop="name">
                  <el-input  v-model="rightDataForm.name" placeholder="请填写您的真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input  v-model="rightDataForm.phone" placeholder="请填写您的手机号"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="sex" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input placeholder="请输入密码" v-model="rightDataForm.password" show-password></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submit(rightDataForm)">提交修改</el-button>
                <!-- <el-button size="mini" type="warning">关闭</el-button> -->
              </div>
            </div>
          </el-card>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import { myInfo, update } from "@/api/user.js";
  export default {
    mounted () {
      this.page()
    },
    data() {
      return {
        avatar: "",
        dataForm: {
          avatar: null,
          createTime:'',
          gender:0,
          id:0,
          job:2,
          name:'',
          nickName:'',
          password:'',
          phone:'',
          score:'0',
          status:'0',
          updateTime:'',
        },

        rightDataForm: {
          gender:0,
          name:'',
          nickName:'',
          password:'',
          phone:'',
        },

       options: [
          {
            value: '1',
            label: '男'
          }, {
            value: '2',
            label: '女'
          },
       ],

       sex: '',

        rules: {
          nickName: [
            { required: true, message: '请输入您的昵称', trigger: 'blur' },
            { min: 1, max: 14, message: '长度不超过 14 个字符', trigger: 'blur' },
            { pattern: /^[^ .,<>]*$/, message: '昵称中有违规字符，请换一个吧', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入您的密码', trigger: 'blur' },
            { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入您的电话号码', trigger: 'blur' },
            { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '号码的格式不正确', trigger: 'blur' }
          ]
        }
      }
    },

    methods: {
      page() {
        myInfo().then((result) => {
          if (result.data.status === 200) {
            this.dataForm = result.data.data

            // 头像
            if ( this.dataForm.avatar !== null) {
              this.avatar = this.dataForm.avatar
            } else {
              this.avatar = "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            }

            let name = this.dataForm.name === '000' ? '' : this.dataForm.name
            let phone = this.dataForm.phone === '000' ? '' : this.dataForm.phone

            this.rightDataForm = {
              gender: this.dataForm.gender,
              name: name,
              nickName: this.dataForm.nickName,
              password: this.dataForm.password,
              phone: phone,
            }

            if (this.rightDataForm.gender != 0) {
              this.sex = this.rightDataForm.gender == 1 ? '男' : '女'
            }
          }
        })
      },

      submit(formName) {
        this.$refs.rightDataForm.validate((valid) => {
          if (valid) {

            this.$confirm('确认提交修改吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // console.log(this.sex)
              if (this.sex === '男') {
                this.rightDataForm.gender = '1'
              } else if (this.sex === '女') {
                this.rightDataForm.gender = '2'
              } else {
                this.rightDataForm.gender = this.sex
              }
              
              update(this.rightDataForm).then((result) => {
                if (result.data.status == 200) {
                  //修改成功
                  this.$message.success(result.data.data);
                  // 刷新页面
                  this.page()
                } else {
                  this.$message.error(result.data.msg);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消提交'
              });
            });

          } else {
            this.$message.error("请按规则填写！")
            return false;
          }
        });






      }
    }
  }
</script>

<style lang="scss" scoped>
  .names {
    display: flex;
    align-items: center;
  }

  .names>.demo-basic--circle {
    padding-left: 20px;
    margin-right: 60px; /* 自定义间距 */
  }

  //卡片样式
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  //文本样式区
  .name-role {
    font-size: 16px;
    padding: 5px;
    text-align: center;
  }

  .sender {
    text-align: center;
    font-weight: bold;
    font-size: 17px;
  }

  .registe-info {
    text-align: center;
    padding-top: 10px;
  }

  .personal-relation {
    font-size: 16px;
    padding: 0px 5px 15px;
    margin-right: 1px;
    width: 100%
  }

  .relation-item {
    padding: 12px;

  }

  .dialog-footer {
    padding-top: 10px;
    padding-left: 10%;
  }

  //布局样式区
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
